<template>
  <div class="comment_list">
    <div v-for="item in props.commentList" :key="item.id">
      <div class="comment_list_item">
        <!-- <img v-lazy="item.userAvatar" /> -->
        <el-avatar class="avatar-animate" :src="item.userAvatar" :size="appStore.isMobile ? 25 : 50" />

        <div class="comment_list_item_info">
          <p>{{ item.content }}</p>
          <div class="author">
            <span>
              <i>{{ item.author }}</i> |
              <b>{{ formatUtcTime(item.createAt) }}</b>
            </span>
            <span @click="replyComment(item.id)">回复</span>
          </div>
          <!-- 回复输入框 -->
          <Textarea
            :id="item.id"
            :reply="true"
            @onAddComment="addComment"
            @onBlur="onBlurHandle"
            style="display: none"
          />
        </div>
      </div>
      <div
        class="comment_list_child"
        v-if="item.children.length !== 0"
        v-for="i in item.children"
        :key="i.id"
      >
        <el-avatar class="avatar-animate" :src="i.userAvatar" :size="appStore.isMobile ? 25 : 50" />
        <div class="comment_list_child_info">
          <p class="content">
            回复：
            <p class="replyContent">
              <i>{{ i.replyUser }}</i>
            {{ i.replyContent }}
          </p>
            <div>{{ i.content }}</div>
          </p>
          <div class="author">
            <span>
              <i>{{ i.author }}</i>
              <b>{{ formatUtcTime(i.createAt) }}</b>
            </span>
            <span @click="replyComment(i.id)">回复</span>
          </div>
          <!-- 回复输入框 -->
          <Textarea
            :id="i.id"
            style="display: none"
            :reply="true"
            @onAddComment="addComment"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import formatUtcTime from '@/utils/formatTime'
  import Textarea from './Textarea.vue'
  import useAppStore from '@/store/appStore'
  const appStore = useAppStore()

  const props = defineProps({
    commentList: Array,
  })
  const emit = defineEmits(['onAddReply'])
  const replyComment = id => {
    const replyDiv = document.getElementById(id)
    replyDiv.style.display = 'block'
  }
  const addComment = (reply, id) => {
    // console.log('评论内容', reply)
    // console.log('回复的评论id', id)
    emit('onAddReply', reply, id)
    document.getElementById(id).style.display = 'none'
  }
  const onBlurHandle = id => {
    document.getElementById(id).style.display = 'none'
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .comment_list {
      width: 100%;
      margin-top: 15px;
      .comment_list_item {
        display: flex;
        margin: 12px 0;
        .comment_list_item_info {
          position: relative;
          flex: 1;
          font-size: 16px;
          background: var(--background-primary);
          border-radius: 12px;
          padding: 15px;
          &::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-right: 15px solid var(--background-primary);
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            left: -7px;
            top: 10px;
          }
          p {
            font-size: 16px;
            white-space: pre-line;
            overflow-wrap: break-word;
            word-break: break-all;
            margin: 0;
          }
          .author {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            span {
              &:nth-child(1) {
                font-size: 10px;
                margin-top: 30px;
                i {
                  opacity: 1;
                  font-size: 16px;
                  color: var(--text-accent);
                  margin-right: 5px;
                }
                b {
                  margin-left: 5px;
                  opacity: 0.5;
                }
              }
              &:nth-child(2) {
                font-size: 14px;
                color: var(--text-accent);
                cursor: pointer;
              }
            }
          }
          .text_area {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            margin: 16px 0;
            .text_area_avatar {
              display: inline-block;
              width: 40px;
              height: 40px;
              margin-right: 8px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                transition-property: transform;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 0.8s;
                &:hover {
                  transform: rotate(1turn);
                }
              }
            }
            .text_area_content {
              flex: 1;
              margin-left: 15px;
              #input {
                width: 50%;
                background: var(--background-secondary);
                resize: vertical;
                padding: 16px;
                border-radius: 10px;
                font-size: 16px;
                overflow: auto;
                color: var(--text-bright);
                border: none;
                outline: none;
              }
              .text_area_content_increment {
                position: relative;
                width: 50%;
                height: 50px;
                span {
                  position: absolute;
                  top: 5px;
                  right: -35px;
                  width: 80px;
                  height: 35px;
                  text-align: center;
                  line-height: 35px;
                  font-size: 14px;
                  color: #fff;
                  background: var(--main-gradient);
                  border-radius: 8px;
                }
              }
              div {
                &:nth-of-type(2) {
                  width: 103%;
                  height: 2px;
                  background: var(--text-normal);
                  margin-top: 24px;
                }
              }
            }
          }
        }
      }
      .comment_list_child {
        display: flex;
        margin: 12px 0;
        margin-left: 60px;
        .comment_list_child_avatar {
          margin-right: 8px;
          transition-property: transform;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 0.8s;
          &:hover {
            transform: rotate(1turn);
          }
        }
        .comment_list_child_info {
          position: relative;
          flex: 1;
          font-size: 16px;
          background: var(--background-primary);
          border-radius: 12px;
          padding: 15px;
          &::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-right: 15px solid var(--background-primary);
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            left: -7px;
            top: 10px;
          }
          .content{
            line-height: 26px;
            white-space: pre-line;
            overflow-wrap: break-word;
            word-break: break-all;
            margin: 0;  
            .replyContent {
              i {
              color: var(--custom-quote-warning);
              margin-right: 12px;
            }
              padding: 8px;
              background-color: var(--background-secondary);
              border-radius: 12px;
            }
          }
          .author {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            span {
              &:nth-child(1) {
                font-size: 10px;
                i {
                  opacity: 1;
                  font-size: 16px;
                  color: var(--text-accent);
                  margin-right: 5px;
                }
                b {
                  margin-left: 5px;
                  opacity: 0.5;
                }
              }
              &:nth-child(2) {
                font-size: 14px;
                color: var(--text-accent);
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 990px) {
    .comment_list {
      width: 100%;
      margin-top: 15px;
      .comment_list_item {
        display: flex;
        margin: 12px 0;
        .comment_list_item_info {
          position: relative;
          flex: 1;
          font-size: 16px;
          background: var(--background-primary);
          border-radius: 12px;
          padding: 15px;
          &::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-right: 15px solid var(--background-primary);
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            left: -7px;
            top: 10px;
          }
          p {
            font-size: 12px;
            white-space: pre-line;
            overflow-wrap: break-word;
            word-break: break-all;
            margin: 0;
          }
          .author {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              &:nth-child(1) {
                font-size: 10px;
                margin-top: 30px;
                i {
                  opacity: 1;
                  font-size: 12px;
                  color: var(--text-accent);
                  margin-right: 5px;
                }
                b {
                  font-size: 12px;
                  margin-left: 5px;
                  opacity: 0.5;
                }
              }
              &:nth-child(2) {
                margin-top: 24px;
                font-size: 12px;
                color: var(--text-accent);
              }
            }
          }
          .text_area {
            display: flex;
            width: 100%;
            justify-content: space-around;
            margin-top: 25px;
            .text_area_avatar {
              width: 40px;
              height: 40px;
              margin-right: 8px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                transition-property: transform;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 0.8s;
                &:hover {
                  transform: rotate(1turn);
                }
              }
            }
            .text_area_content {
              flex: 1;
              width: 50%;
              margin-left: 15px;
              #input {
                width: 50%;
                background: var(--background-secondary);
                resize: vertical;
                padding: 16px;
                border-radius: 10px;
                font-size: 16px;
                overflow: auto;
                color: var(--text-bright);
                border: none;
                outline: none;
              }
              .text_area_content_increment {
                position: relative;
                width: 50%;
                height: 50px;
                span {
                  position: absolute;
                  top: 5px;
                  right: -35px;
                  width: 80px;
                  height: 35px;
                  text-align: center;
                  line-height: 35px;
                  font-size: 14px;
                  color: #fff;
                  background: var(--main-gradient);
                  border-radius: 8px;
                }
              }
              div {
                &:nth-of-type(2) {
                  width: 103%;
                  height: 2px;
                  background: var(--text-normal);
                  margin-top: 24px;
                }
              }
            }
          }
        }
      }
      .comment_list_child {
        display: flex;
        margin: 12px 0;
        margin-left: 40px;
        .comment_list_child_avatar {
          margin-right: 8px;
          transition-property: transform;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 0.8s;
          &:hover {
            transform: rotate(1turn);
          }
        }
        .comment_list_child_info {
          position: relative;
          flex: 1;
          font-size: 16px;
          background: var(--background-primary);
          border-radius: 12px;
          padding: 8px;
          &::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-right: 15px solid var(--background-primary);
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            left: -7px;
            top: 10px;
          }
          .content {
            font-size: 12px;
            white-space: pre-line;
            overflow-wrap: break-word;
            word-break: break-all;
            margin: 0;      
            .replyContent {
              font-size: 12px;
              margin-top: 8px;
              padding: 8px;
              background-color: var(--background-secondary);
              border-radius: 12px;
              i {
              font-size: 12px;
              color: var(--custom-quote-warning);
              margin-right: 12px;
              opacity: 0.7;
            }
            }
          }
          .author {
            display: flex;
            justify-content: space-between;
            margin-top: 24px;
            span {
              &:nth-child(1) {
                font-size: 10px;
                i {
                  opacity: 1;
                  font-size: 12px;
                  color: var(--text-accent);
                  margin-right: 5px;
                }
                b {
                  font-size: 10px;
                  margin-left: 3px;
                  opacity: 0.5;
                }
              }
              &:nth-child(2) {
                font-size: 10px;
                color: var(--text-accent);
              }
            }
          }
        }
      }
    }
  }
</style>
